<template>
  <el-card>
    <el-input
      placeholder="请输入"
      style="width: 200px"
      class="mr_20"
      v-model="username"
    ></el-input>
    <el-button icon="el-icon-search" type="primary" @click="searchClick"
      >查询</el-button
    >
    <el-button @click="searcClear" :disabled="username == ''">清空</el-button>
    <div class="mb_20 mt_20"></div>
    <el-button type="primary" @click="dialogVisible = true">添加</el-button>
    <el-button type="danger" class="mr_20" @click="deles">批量删除</el-button>
    <el-table
      border
      class="mt_20"
      :data="infoList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center"></el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="用户昵称" prop="nickName"> </el-table-column>
      <el-table-column label="角色列表" prop="roleName"></el-table-column>
      <el-table-column label="创建时间" prop="gmtCreate"></el-table-column>
      <el-table-column label="更新时间" prop="gmtModified"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="200">
        <template #default="{ row, $index }">
          <el-button
            class="mr_10"
            type="info"
            icon="el-icon-user-solid"
            size="small"
            title="分配角色"
            @click="assingClick(row)"
          ></el-button>
          <el-button
            class="mr_10"
            type="primary"
            icon="el-icon-edit"
            size="small"
          ></el-button>
          <el-popconfirm title="确认要删除吗?" @confirm="confirmClick(row.id)">
            <el-button
              slot="reference"
              type="danger"
              icon="el-icon-delete"
              size="small"
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="5"
      layout=" prev, pager, next, jumper, ->, sizes,total"
      :total="total"
    >
    </el-pagination>
    <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form label-width="800">
        <el-form-item label="用户名">
          <el-input v-model="forName.nickName"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="forName.username"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input v-model="forName.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveClick">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="设置角色"
      :visible.sync="dialog1Visible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form label-width="800">
        <el-form-item label="用户名">
          <el-input :value="assName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="角色列表">
          <el-checkbox
            :indeterminate="true"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>
          <el-checkbox-group
            v-model="assList.assignRoles"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox v-for="ass in assList.allRolesList" :label="ass.roleName" :key="ass.id">{{
              ass.roleName
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog1Visible = false">取 消</el-button>
        <el-button type="primary" @click="saveAssClick">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { getInfoList, saveUser, deleUser, getUserList,setdoAssign } from "@/api/pro/useAcl";
export default {
  name: "Acl",
  data() {
    return {
      page: 5,
      current: 1,
      total: 0,
      selectIdLisy: [],
      infoList: [],
      checkAll:false,
      username: "",
      dialogVisible: false,
      dialog1Visible: false,
      forName: {
        nickName: "",
        password: "",
        username: "",
      },
      assList: {
        allRolesList: [],
        assignRoles: [],
      },
      AllRolesLists:[],
      assName: "",
      roelId:'',
      userId:''
    };
  },

  methods: {
    // 每页条数
    handleSizeChange(page) {
      this.page = page;
      this.setinfoList();
    },
    // 当前页
    handleCurrentChange(current) {
      this.current = current;
      this.setinfoList();
    },
    // 获取列表数据
    async setinfoList() {
      try {
        let result = await getInfoList(this.current, this.page, this.username);
        this.infoList = result.data.items;
        console.log(result.data.items);
        this.total = result.data.total;
      } catch (error) {
        console.log(error);
      }
    },
    // 点击查询的回调
    searchClick() {
      this.setinfoList();
    },
    // 点击清空的回调
    searcClear() {
      this.username = "";
      this.setinfoList();
    },
    // 添加新用户信息的功能函数
    async setSaveUser() {
      try {
        let result = await saveUser(this.forName);
        this.dialogVisible = false;
        this.setinfoList();
        this.$message({
          message: "添加成功",
          type: "success",
        });
      } catch (error) {
        console.log(error);
      }
    },
    // 点击保存用户信息的回调
    saveClick() {
      this.setSaveUser();
    },
    // 弹出框关闭的回调
    handleClose() {},
    // 删除单个用户的功能函数
    async setDelUser(id) {
      try {
        let result = await deleUser(id);
        this.$message({
          message: "删除单条数据成功",
          type: "success",
        });
        this.setinfoList();
      } catch (error) {
        this.$message({
          message: "删除单条数据失败",
          type: "error",
        });
        console.log(error);
      }
    },
    // 点击删除的回调
    confirmClick(id) {
      this.setDelUser(id);
    },
    // 点击多选框的回调
    handleSelectionChange(ev) {
      this.selectIdLisy = ev.map((e) => {
        return e.id;
      });
    },
    // 点击批量删除的回调
    async deles() {
      try {
        let res = await Promise.all(
          this.selectIdLisy.map(async (e) => {
            return await deleUser(e);
          })
        );
        let type = res.some((e) => {
          return e.message == "成功";
        });
        if (type == true) {
          this.$message({
            type: "success",
            message: "批量删除成功",
          });
          this.setinfoList();
        } else {
          this.$message({
            type: "error",
            message: "批量删除失败",
          });
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取角色信息列表的功能函数
    async setAssLits(id) {
      try {
        let result = await getUserList(id);
        this.assList.allRolesList = result.data.allRolesList
        this.assList.assignRoles = result.data.assignRoles.map(e=>{
          return e.roleName
        });
        this.dialog1Visible = true
      } catch (error) {
        console.log(error);
      }
    },
    // 点击分配角色的回调
    assingClick(row) {
      this.setAssLits(row.id);
      this.assName = row.username;
      this.userId = row.id
      this.dialog1Visible = true
    },
    // 角色管理全选状态管理的回调
    handleCheckAllChange(e){
      console.log(e);
    },
    // 单个角色管理全选状态管理的回调
    handleCheckedCitiesChange(ev){
      console.log(ev);
      let roelIdlist =  this.assList.allRolesList.filter(e=>{
       return  ev.some(es=>{
        return es == e.roleName
      })
     }).map(e=>{
        return e.id
      })
    this.roelId = roelIdlist.join(',')
    },
    // 角色管理的确定回调
    saveClick(){

    },
    // 属性管理确定功能函数
    async setsaveAss(){
      try {
        let result = await setdoAssign(this.userId,this.roelId)
        console.log(result);
        this.dialog1Visible = false
        this.$message({
          type:"success",
          message:"修改角色属性成功"
        })
        this.setinfoList();
      } catch (error) {
        console.log(error);
      }
    },
    // 属性管理确定回调
    saveAssClick(){
      this.setsaveAss()
    }
  },
  mounted() {
    this.setinfoList();
  },
};
</script>

<style>
</style>